<nav>
    <ul class="w1200">
        <li>
            <a href="#">学院概况</a>
            <ul class="sub-menu">
                <li><a href="#">学院介绍</a></li>
                <li><a href="#">现任领导</a></li>
                <li><a href="#">学院风采</a></li>
                <li><a href="#">历史沿革</a></li>
            </ul>
        </li>
        <li><a href="#">组织机构</a></li>
        <li>
            <a href="#">师资队伍</a>
            <ul class="sub-menu">
                <li><a href="#">计算机科学与技术系</a></li>
                <li><a href="#">网络工程系</a></li>
                <li><a href="#">软件工程系</a></li>
                <li><a href="#">物联网工程系</a></li>
                <li><a href="#">学院办公室</a></li>
                <li><a href="#">学生工作办公室</a></li>
                <li><a href="#">实验中学</a></li>
                <li><a href="#">兼职教授</a></li>
            </ul>
        </li>
        <li>
            <a href="#">人才培养</a>
            <ul class="sub-menu">
                <li><a href="#">本科教育</a></li>
                <li><a href="#">研究生教育</a></li>
            </ul>
        </li>
        <li><a href="#">学科建设</a></li>
        <li>
            <a href="#">科学研究</a>
            <ul class="sub-menu">
                <li><a href="#">科研团队</a></li>
                <li><a href="#">科研成果</a></li>
                <li><a href="#">科研获奖</a></li>
                <li><a href="#">省部级重点基地</a></li>
                <li><a href="#">校级重点基地</a></li>
            </ul>
        </li>
        <li>
            <a href="#">招生工作</a>
            <ul class="sub-menu">
                <li><a href="#">本科生招生就业</a></li>
                <li><a href="#">研究生招生就业</a></li>
            </ul>
        </li>
        <li><a href="#">校友服务</a></li>
        <li><a href="#">学生工作</a></li>
        <li><a href="#">党团工会</a></li>
        <li>
            <a href="#">资料下载</a>
            <ul class="sub-menu">
                <li><a href="#">教学资料下载</a></li>
                <li><a href="#">科研资料下载</a></li>
            </ul>
        </li>
        <li><a href="#">院领导信箱</a></li>
    </ul>
</nav>
<style>
    nav {
  background-color: #ebebeb;
}

nav a {
  display: block;
  text-align: center;
  height: 4rem;
  line-height: 4rem;
}
/* 2.1 一级菜单 */
nav ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav li {
  flex: 1;
  position: relative;
}

nav li > a {
  font-size: 1.6rem;
}

nav li:hover > a {
  color: #fff;
  background-color: #89211b;
}

nav li:first-of-type > a {
  color: #fff;
  background-color: #89211b;
}

/* 2.2 二级菜单定义 */
nav .sub-menu {
  display: none;
  position: absolute;
}

nav ul.sub-menu a {
  color: #fff;
  font-size: 1.2rem;
}

/* 100vw 100%可视区域宽度 */
nav li:hover ul.sub-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #89211b;
  width: calc(120rem / 9);
  /* width: calc(100vw / 9);   */
}

nav ul.sub-menu li:hover > a {
  background-color: #a1261f;
}
/* 公共定义 */

/* 设置统一的根字体大小，方便使用rem */
html {
  font-size: 62.5%;
}

/* 统一设置网站文本颜色、大小 */
body {
  color: #333;
  font-size: 1.2rem;
}

/* 去掉一些文本类标签的预定义  */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
figure {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

/* 去掉列表项前面的符号 */
li {
  list-style-type: none;
}

/* 去掉链接a标签的下划线 */
a {
  color: #333;
  text-decoration: none;
}

/* hack:依据父容器的大小缩放图片 */
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* 最外层容器统一定义，充满可视区域 */
header,
nav,
main,
footer {
  width: 100%;
}

/* 统一固定宽度定义 */
.w1200 {
  width: 120rem;
  margin: 0 auto;
}

</style>